<template>
	<view class="content">

		<view class="cp-menu">
			<view :class="'cp-menu-item ' + (typeId=== 3 ?'active':'')" data-typename='新闻中心' :data-typeid='3'
			 @tap="typelink">
				<text>全部新闻</text>
			</view>
			<view :class="'cp-menu-item ' + (typeId===item.typeid?'active':'')" :data-typename='item.typename' :data-typeid='item.typeid' v-for="(item,index) in sonType"
			 @tap="typelink">
				<text>{{item.typename}}</text>
			</view>

		</view>

		<view class="list">
			<view class="list-art">
				<view class="list-art-item" v-for="(item,index) in productList">
					<image @tap="artlink" :data-id='item.id' :data-typename="item.typename" :data-channelid="item.channelid" :src="item.litpic"
					 mode="aspectFill" class="pic_lis_img" />
					<view class="text">
						<view class="txt-title h5">{{item.title}}</view>
						<view class="txt-info">
							{{item.description}}
						</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import {
		ajaxtype,
		ajaxlist,
		ajaxzan
	} from '../../utils/api.js'
	export default {
		data() {
			return {
				sonType: [],
				pageNum: 1,
				listNum: 8,
				typeId: 3,
				productList: [],
				isLoadMore: false
			}
		},
		onLoad(options) {
			var that = this
			that.typeId = options.typeid ? options.typeid : '3'
			that.getSonType(3)
			this.getList() //获取产品列表
		},

		onReachBottom() { //上拉触底函数
			console.log(this.typeId)
			if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
				this.isLoadMore = true
				this.pageNum += 1
				this.getList() //获取产品列表
				uni.showLoading({
					title: '加载中'
				})
			}
		},
		methods: {
			typelink: function(e) {
				let typeid = e.currentTarget.dataset.typeid
				let typename = e.currentTarget.dataset.typename
				if(typeid!==this.typeId){
					this.productList=[];
					this.pageNum=1
					this.typeId=typeid
					this.getList()
					uni.setNavigationBarTitle({
					    title: typename
					});
				}
					/*
				uni.navigateTo({
					url: '../product2/product2?typeid=' + typeid
				});
	*/
			},
			artlink: function(e) {

				let {
					id,
					channelid,
					typename
				} = e.currentTarget.dataset
				uni.navigateTo({
					url: '../art/art?aid=' + id + '&channlid=' + channelid + '&typename=' + typename
				});
			},
			getList: function() {
				var that = this;
				ajaxlist(that.typeId, that.pageNum, that.listNum).then((res) => {
					
					if (res.data && res.data.state === 1) {
						let datas = res.data.data.map((res) => {
							return {
								litpic: res.cfg_basehost + res.litpic,
								typeid: res.id,
								typename: res.typename,
								title: res.title,
								channelid: res.channel,
								id: res.id,
								zan: res.zan,
								description:res.description.slice(0,30)
							}
						})

						if (that.productList.length > 0) {
							that.productList = [...that.productList, ...datas].filter(item => item)
						} else {
							that.productList = datas
						}

						setTimeout(function() {
							uni.hideLoading()
							that.isLoadMore = false
						}, 1000)
					} else {
						uni.hideLoading()
						that.isLoadMore = true
					}
				})

			},
			zan: function(aid, index) {
				var that = this
				ajaxzan(aid).then((res) => {

					if (res.data.state === 1) {
						that.productList[index].islove = 1
						that.productList[index].zan = res.data.data
					}
				})
			},
			getSonType: function(typeId) {
				var that = this;
				ajaxtype(typeId).then((res) => {

					if (res.data.data.length > 0) {
						let datas = res.data.data.map((res) => {
							let s = {
								typelitpic: res.cfg_basehost + res.typelitpic,
								typeid: res.id,
								typename: res.typename
							};
							return s
						})
						that.sonType = datas
					} else {
						uni.showToast({
							title: "子栏目为空",
							icon: 'none',
							duration: 2000
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.cp-menu {
		@include flex-block();
		width: 100%;
		background-color: #fff;
		box-shadow: 0px 5px 15px #dfdfdf;

		.cp-menu-item {
			@include flex(1);
			text-align: center;
			color: $base;
			padding: 2vw 0;
			font-size: 3.5vw;
			line-height: 8vw;
			@include zihang(1);
			position: relative;

			&:after {
				width: 0px;
				content: '';
				@include transition(all .5s);
				position: absolute;
				height: 0.7vw;
				background-color: $base;
				left: 50%;
				top: 9vw;

			}

			&.active {
				&:after {
					margin-left: -2.5vw;
					width: 5vw;

				}
			}
		}
	}

	.list {
		padding: 2vw;
		margin-top: 4vw;

		.list-art {
			padding: 0 3vw;

			.list-art-item {
				background-color: #fff;
				border-radius: 2vw;
				overflow: hidden;
				margin-bottom: 4vw;
            .pic_lis_img{
				width: 100%;
			}
				.text {
					padding: 2vw;
                      .txt-title{
						  @include zihang(2);
						  font-size: 3.6vw;
					  }
					.txt-info {
						color: #999;
						margin-top: 2vw;
						font-size: 3.2vw;
					}
				}
			}
		}

	}
</style>
